/**
 * Created by wzq on 2014/7/7.
 */

// line
(function () {
    var cLine = document.getElementById('canvas_line'),
        ctx = cLine.getContext('2d'),
        width = cLine.width,
        height = cLine.height;

    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, width, height);

    //ctx.fillStyle = "#FFFFFF";
    ctx.moveTo(width / 2, height / 2);
    ctx.lineTo(width, height);
    ctx.lineTo(width, height / 2);
    ctx.lineTo(width / 2, height / 2);
    ctx.stroke();

})();

// grid
(function () {
    var cGrid = document.getElementById('canvas_grid'),
        ctx = cGrid.getContext('2d'),
// width = cGrid.width,
// height = cGrid.height,
        rolNum = 10,
        colNum = 10;

    ctx.fillStyle = "#FF0000";
    var rowHeight = cGrid.height / rowNum;
    var colWidth = cGrid.width / colNum;

    // 画横线
    for (var i = 0; i < rowHeight; i++) {
        var fromLeft = 0,
            toLeft = cGrid.width,
            fromHeight = i * rowHeight;
        ctx.moveTo(fromLeft, fromHeight);
        ctx.lineTo(toLeft, fromHeight);
    }


})();